<script setup>
import { ref, reactive, defineProps, defineExpose, onMounted } from 'vue';
import { TextFormItem, ImageFormItem } from '@/components';
// 属性
const { refreshList } = defineProps(['refreshList']);

//引用
const refForm = ref(null);

// 数据
const form = ref({});
const editting = ref(false);
const operType = ref('');
const visible = ref(false);
const self = {};
// 方法
const showCreate = () => {
  form.value = {};
  operType.value = 'create';
  editting.value = true;
  visible.value = true;
};
const showModify = async (item) => {
  const data = await api.getMemberDetail({
    id: item.id
  });
  if (!data.success) {
    return $alert(data.message);
  }
  self.record = item;
  self.originData = _.cloneDeep(data.result);
  form.value = data.result;
  operType.value = 'modify';
  editting.value = true;
  visible.value = true;
};
const showDetail = async (item) => {
  const data = await api.getMemberDetail({
    id: item.id
  });
  if (!data.success) {
    return $alert(data.message);
  }
  form.value = data.result;
  operType.value = 'show';
  visible.value = true;
};
const create = async () => {
  if (!(await utils.valid(refForm))) {
    return;
  }
  const data = await api.createMember(form.value);
  if (!data.success) {
    return $alert(data.message);
  }
  $success('创建成功');
  refreshList && refreshList();
  visible.value = false;
};
const modify = async () => {
  if (!(await utils.valid(refForm))) {
    return;
  }
  const data = await api.modifyMember(form.value);
  if (!data.success) {
    return $alert(data.message);
  }
  $success('修改成功');
  refreshList && refreshList();
  visible.value = false;
};
// 导出
defineExpose({
  showCreate,
  showModify,
  showDetail,
});
</script>

<template>
  <div>
    <el-dialog v-if="visible" title="人员详情" v-model="visible" width="600px" :close-on-click-modal="false" :append-to-body="true">
      <el-form :model="form" ref="refForm" :label-position="right" label-width="90px">
        <TextFormItem label="名称" name="name" rule="name" :form="form" :editting="editting" />
        <TextFormItem label="电话" name="phone" rule="phone" :form="form" :editting="editting" />
        <ImageFormItem label="头像" name="head" :size="60" :required="false" :form="form" :editting="editting" />
        <!-- <SelectListFormItem label="角色" name="role.name" @click="() => $refs.selectRole.show()"  :form="form" :editting="editting" />
        <SelectListFormItem label="单位" name="organization.name" @click="() => $refs.selectOrganization.show()" :form="form" :editting="editting" /> -->
      </el-form>
      <template #footer>
        <el-button v-if="operType === 'modify'" type="primary" @click="modify">提交修改</el-button>
        <el-button v-if="operType === 'create'" type="primary" @click="create">立即创建</el-button>
      </template>
    </el-dialog>
    <!-- <SelectRole ref="selectRole" :onSelect="(o) => {$set(form, 'role', o);}" />
    <SelectOrganization ref="selectOrganization" :onSelect="(o) => $set(form, 'organization', o)" /> -->
  </div>
</template>

<style lang='less' scoped>
</style>
